<template>
  <el-dialog
    :title="checkTypeFlag == 2 ? '营销项目状态变更详情':'立项审批详情'"
    v-model="checkDialogShow"
    width="1400px"
    class="dialogBox"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleBack"
  >
    <!--  -->
    <div class="dialog-top">
      <span>项目名称：{{ projectForm.projectName || "--" }}</span>
      <span>创建时间：{{ projectForm.createTime || "--" }}</span>
      <span>申请部门：{{ projectForm.deptName || "--" }}</span>
      <span v-if="checkTypeFlag != 2">审批类型：项目立项</span>

      <span style="color: #007cef" v-if="checkTypeFlag != 2"
        >审批状态：{{ projectForm.checkStatusName || "--" }}</span
      >
      <span v-if="checkTypeFlag == 2"
        >申请类型：{{ projectForm.applyType || "--" }}</span
      >
    </div>
    <div class="projectAdd" v-loading="detailInfoShow">
      <span
        slot="footer"
        class="dialog-footer"
        v-if="
          projectForm.checkStatus == 1 ||
          projectForm.checkStatus == 2 ||
          projectForm.checkProjectStatus == 1 ||
          projectForm.checkProjectStatus == 2
        "
      >
        <div
          class="search-button"
          style="position: none"
          v-if="!contactAddShow && !saleAddShow && !detailFlag"
        >
          <el-button
            class="btn search"
            @click="handleCheckBtn2(projectFormRef, 3, '同意')"
            ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
            >同意</el-button
          >
          <el-button
            class="btn withdraw"
            @click="handleCheckBtn2(projectFormRef, 4, '拒绝')"
            ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
            >拒绝</el-button
          >

          <el-button
            class="btn withdraw"
            @click="handleCheckBtn2(projectFormRef, 6, '驳回')"
            ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
            >驳回</el-button
          >

          <!-- <el-button
            v-if="projectForm.checkStatus != 0"
            class="btn add"
            @click="handleCheckBtn(projectFormRef, 5, '撤回')"
            ><el-icon class="icon" color="#fff"> <DocumentDelete /> </el-icon
            >撤销</el-button
          > -->

          <el-button class="btn direction" @click="handleBack"
            ><el-icon class="icon" color="#fff"> <Back /> </el-icon
            >返回</el-button
          >
        </div>
      </span>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="基本信息" name="info">
          <!-- 筛选按钮 -->

          <el-collapse v-model="activeNames" v-if="activeFlag === 1">
            <!-- 基础信息 -->
            <el-collapse-item name="1" v-if="!contactAddShow && !saleAddShow">
              <!-- class="transform-down" -->
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">基本信息</span>
              </template>
              <div v-if="checkTypeFlag == 2" style="margin-top: 20px">
                <el-form-item label="情况说明：" prop="projectType">
                  {{ projectForm.projectStatusRemark || "无" }}
                </el-form-item>
              </div>
              <!-- project-info -->
              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
                >
                  <el-descriptions-item
                    label="所属公司"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.companyName || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="商务进度"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >项目立项</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="业务人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.businessName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目金额"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.money || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.projectTypeName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目种类"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.projectCategoryName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="起止时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template
                      v-if="projectForm.dateValue && projectForm.dateValue[0]"
                    >
                      {{ projectForm.dateValue[0] }} 至
                      {{ projectForm.dateValue[1] }}
                    </template>
                    <template v-else> -- </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="客户"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.customerName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目执行地"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template v-if="projectForm.provinceName">
                      {{ projectForm.provinceName }}{{ projectForm.cityName
                      }}{{ projectForm.areaName }}
                    </template>
                    <template v-else> -- </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="详细地址"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.address || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="最终使用单位"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectForm.endUseUnit || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="使用单位联系人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template v-if="projectForm.unitContact">
                      {{
                        projectForm.unitContact +
                          "-" +
                          projectForm.unitContactInformation || "--"
                      }}
                    </template>
                    <template v-else>
                      <div>--</div>
                    </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="备注"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    width="330px"
                  >
                    <div class="desContent" :title="projectForm.remarks">
                      {{ projectForm.remarks || "--" }}
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="所属行业"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectForm.industryName || "--"
                    }}</el-descriptions-item
                  >
                </el-descriptions>
                <el-form
                  v-if="false"
                  :model="projectForm"
                  ref="projectFormRef"
                  :rules="queryRules"
                  label-width="100px"
                  v-enterToNext
                  :disabled="pageType === 'detail' || pageType === 'check'"
                >
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="项目编号：">
                        <el-input
                          v-model="projectForm.projectCode"
                          placeholder="自动生成"
                          clearable
                          class="search-input"
                          disabled
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="项目名称："
                        prop="projectName"
                        label-width="130"
                      >
                        <el-input
                          ref="refInput"
                          :disabled="pageType == 'status'"
                          v-model="projectForm.projectName"
                          placeholder="请输入"
                          clearable
                          maxlength="20"
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="业务人员："
                        prop="userId"
                        label-width="120"
                      >
                        <!-- <el-select
                    v-model="projectForm.userId"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                    @change="handlePeopleChange"
                  >
                    <el-option
                      v-for="dict in userList"
                      :key="dict.userId"
                      :label="dict.nickName"
                      :value="dict.userId"
                    />
                  </el-select> -->
                        <el-select
                          :disabled="pageType == 'status'"
                          v-model="projectForm.userId"
                          style="width: 268px"
                          placeholder="请选择"
                          clearable
                          filterable
                          popper-class="custom-dropdown"
                          @change="handlePeopleChange"
                        >
                          <div class="dropdown-slot">
                            <span
                              style="
                                float: left;
                                color: #8492a6;
                                margin: 0 0px 0 20px;
                              "
                              >人员姓名</span
                            >
                            <span style="margin: 0 90px 0 57px; color: #8492a6"
                              >联系方式</span
                            >
                            <span
                              style="
                                margin: 0 100px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >职位</span
                            >
                            <span style="color: #8492a6; font-size: 13px"
                              >部门</span
                            >
                          </div>
                          <div class="scrollable-options">
                            <el-option
                              v-for="item in userList"
                              :key="item.userId"
                              :label="item.nickName"
                              :value="item.userId"
                            >
                              <span
                                style="
                                  display: inline-block;
                                  width: 80px;
                                  float: left;
                                  color: #8492a6;
                                "
                                >{{ item.nickName }}</span
                              >
                              <span
                                style="
                                  display: inline-block;
                                  width: 125px;
                                  margin: 0 15px 0 23px;
                                  color: #8492a6;
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                "
                                >{{
                                  item.phonenumber ? item.phonenumber : "--"
                                }}</span
                              >
                              <span
                                style="
                                  display: inline-block;
                                  width: 125px;
                                  font-size: 13px;
                                  margin: 0 0px 0 0px;
                                  transform: translateY(-11px);
                                "
                              >
                                {{ item.postName ? item.postName : "--" }}
                              </span>
                              <span
                                style="
                                  display: inline-block;
                                  margin: 0 0px 0 0px;
                                  font-size: 13px;
                                  transform: translateY(-11px);
                                "
                              >
                                {{ item.deptName ? item.deptName : "--" }}
                              </span>
                            </el-option>
                          </div>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                <el-form-item
                  label="项目状态："
                  prop="projectStatus"
                  label-width="120"
                >
                  <el-select
                    :disabled="pageType == 'add' || pageType == 'edit'"
                    v-model="projectForm.projectStatus"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                  >
                    <el-option
                      v-for="dict in statusList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col> -->
                  </el-row>
                  <el-row :gutter="0">
                    <el-col :span="6">
                      <el-form-item label="项目类型：" prop="projectType">
                        <el-select
                          v-model="projectForm.projectType"
                          placeholder="请选择"
                          clearable
                          :disabled="pageType == 'status'"
                          style="width: 294px"
                        >
                          <el-option
                            v-for="dict in typeList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="项目起止时间："
                        prop="dateValue"
                        label-width="130"
                      >
                        <el-date-picker
                          v-model="projectForm.dateValue"
                          type="daterange"
                          :disabled="pageType == 'status'"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="关联客户："
                        prop="customerId"
                        label-width="120"
                      >
                        <!-- <el-select
                    v-model="projectForm.customerId"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                  >
                    <el-option
                      v-for="dict in customerList"
                      :key="dict.customerId"
                      :label="dict.name"
                      :value="dict.customerId"
                    />
                  </el-select> -->
                        <el-select
                          v-model="projectForm.customerId"
                          style="width: 268px"
                          :disabled="pageType == 'status'"
                          placeholder="请选择"
                          clearable
                          popper-class="custom-dropdown"
                        >
                          <div class="dropdown-slot">
                            <span
                              style="
                                float: left;
                                color: #8492a6;
                                margin: 0 0px 0 20px;
                              "
                              >客户编号</span
                            >
                            <span style="margin: 0 90px 0 53px; color: #8492a6"
                              >客户名称</span
                            >
                            <span
                              style="
                                margin: 0 76px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >企业法人</span
                            >
                            <span style="color: #8492a6; font-size: 13px"
                              >业务人员</span
                            >
                          </div>
                          <div class="scrollable-options">
                            <el-option
                              v-for="item in customerList"
                              :key="item.customerId"
                              :label="item.name"
                              :value="item.customerId"
                            >
                              <span
                                style="
                                  display: inline-block;
                                  width: 80px;
                                  float: left;
                                  color: #8492a6;
                                "
                                >{{ item.customerNum }}</span
                              >
                              <span
                                style="
                                  display: inline-block;
                                  width: 125px;
                                  margin: 0 15px 0 23px;
                                  color: #8492a6;
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis;
                                "
                                >{{ item.name ? item.name : "--" }}</span
                              >
                              <span
                                style="
                                  display: inline-block;
                                  width: 125px;
                                  font-size: 13px;
                                  margin: 0 0px 0 0px;
                                  transform: translateY(-11px);
                                "
                              >
                                {{ item.legalPerson }}
                              </span>
                              <span
                                style="
                                  display: inline-block;
                                  margin: 0 0px 0 0px;
                                  font-size: 13px;
                                  transform: translateY(-11px);
                                "
                              >
                                {{ item.userName }}
                              </span>
                            </el-option>
                          </div>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="项目种类："
                        prop="projectCategory"
                        label-width="120"
                      >
                        <el-select
                          v-model="projectForm.projectCategory"
                          placeholder="请选择"
                          clearable
                          :disabled="pageType == 'status'"
                          class="search-select"
                        >
                          <el-option
                            v-for="dict in kindList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0">
                    <!-- <el-col :span="6">
                <el-form-item label="所属行业：" prop="industry">
                  <el-select
                    v-model="projectForm.industry"
                    placeholder="请选择"
                    clearable
                    :disabled="pageType == 'status'"
                    class="search-select"
                    style="width: 294px"
                  >
                    <el-option
                      v-for="dict in industryList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col> -->
                    <el-col :span="7">
                      <el-form-item
                        label="项目执行地："
                        prop="city"
                        label-width="110"
                      >
                        <el-select
                          filterable
                          style="width: 93px"
                          v-model="projectForm.province"
                          placeholder="请选择"
                          clearable
                          :disabled="pageType == 'status'"
                          class="search-select"
                          @change="handleProvince('province')"
                        >
                          <el-option
                            v-for="dict in provinceList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                        <el-select
                          filterable
                          style="width: 93px; margin: 0 5px"
                          v-model="projectForm.city"
                          placeholder="请选择"
                          clearable
                          :disabled="pageType == 'status'"
                          class="search-select"
                          @change="handleProvince('city')"
                        >
                          <el-option
                            v-for="dict in cityList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                        <el-select
                          filterable
                          style="width: 93px"
                          v-model="projectForm.area"
                          placeholder="请选择"
                          clearable
                          :disabled="pageType == 'status'"
                          class="search-select"
                        >
                          <el-option
                            v-for="dict in areaList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item
                        label="详细地址："
                        prop="address"
                        label-width="100"
                      >
                        <el-input
                          :disabled="pageType == 'status'"
                          style="width: 100%"
                          v-model="projectForm.address"
                          placeholder="请输入"
                          clearable
                          maxlength="25"
                          class="search-input"
                        >
                          <template #append>
                            <img
                              src="@/assets/icons/images/map.png"
                              alt=""
                              style="width: 34px; cursor: pointer"
                              @click="selectaddress"
                            /> </template
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="projectForm.includeContract == 2">
                      <el-form-item
                        label="成交概率预估："
                        label-width="120"
                        prop="probability"
                      >
                        <el-input
                          type="Number"
                          v-model="projectForm.probability"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                          @input="
                            projectForm.probability =
                              projectForm.probability.replace(
                                /^(0+)|[^\d]+/g,
                                ''
                              )
                          "
                        >
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="项目金额：" prop="money">
                        <el-input
                          type="Number"
                          v-model="projectForm.money"
                          placeholder="请输入"
                          clearable
                          maxlength="21"
                          class="search-input"
                        >
                          <template #append>元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="最终使用单位："
                        prop="endUseUnit"
                        label-width="130"
                      >
                        <el-input
                          v-model="projectForm.endUseUnit"
                          placeholder="请输入"
                          clearable
                          maxlength="50"
                          class="search-input"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="projectForm.includeContract == 2">
                      <el-form-item
                        label="计划成交合同时间："
                        prop="planContractTime"
                        label-width="148"
                      >
                        <el-date-picker
                          v-model="projectForm.planContractTime"
                          format="YYYY/MM/DD"
                          class="search-input"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="使用单位联系人:"
                        prop="unitContact"
                        label-width="135"
                      >
                        <el-input
                          v-model="projectForm.unitContact"
                          placeholder="填写姓名"
                          clearable
                          maxlength="10"
                          class="search-input"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label=""
                        prop="unitContactInformation"
                        label-width="10"
                      >
                        <el-input
                          v-model="projectForm.unitContactInformation"
                          placeholder="填写联系方式"
                          clearable
                          maxlength="21"
                          class="search-input"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6" v-if="projectForm.successfulBidder == 0">
                <el-form-item
                  label="中标文件："
                  prop="successfulBidder"
                  label-width="120"
                >
                  <Upload
                    :fileList="projectForm.bidderPictures"
                    :isFull="true"
                    :isCanDelete="pageType == 'detail' ? false : true"
                    :disabled="pageType == 'detail'"
                    :showButton="true"
                    accept=".jpg,.png"
                    @success="(result) => uploadSuccess(result)"
                    @deleteFile="(result) => uploadRemove(result)"
                  />
                </el-form-item>
              </el-col> -->
                  </el-row>
                  <el-row :gutter="0">
                    <el-col :span="12" v-if="projectForm.projectStatus == 3">
                      <el-form-item
                        label="施工地址："
                        prop="constructionAddress"
                        label-width="100"
                      >
                        <el-input
                          style="width: 100%"
                          v-model="projectForm.constructionAddress"
                          placeholder="请输入"
                          clearable
                          maxlength="35"
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        label="期望安装完成日期："
                        prop="installationCompletionTime"
                        label-width="148"
                        v-if="projectForm.projectStatus === 3"
                      >
                        <el-date-picker
                          v-model="projectForm.installationCompletionTime"
                          format="YYYY/MM/DD"
                          class="search-input"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        v-if="projectForm.projectStatus === 3"
                        label="验收日期："
                        prop="checkTime"
                        label-width="120"
                      >
                        <el-date-picker
                          v-model="projectForm.checkTime"
                          format="YYYY/MM/DD"
                          class="search-input"
                          value-format="YYYY-MM-DD"
                          type="date"
                          placeholder="请选择"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <!-- 添加销售清单 -->
            <el-collapse-item
              name="2"
              style="position: relative"
              v-if="saleAddShow && !contactAddShow"
              class="transform-up"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">添加销售清单</span>
              </template>
              <div class="project-info">
                <el-form
                  :model="saleForm"
                  ref="saleFormRef"
                  :rules="querySaleRules"
                  label-width="100px"
                  v-enterToNext
                >
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="销售类目：" prop="saleCategory">
                        <el-select
                          ref="refSelect"
                          @change="handleSaleCategory"
                          v-model="saleForm.saleCategory"
                          placeholder="请选择"
                          clearable
                          class="search-select"
                        >
                          <el-option
                            v-for="dict in saleCategoryList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="saleForm.saleCategory === 0">
                      <el-form-item label="设备名称：" prop="materialId">
                        <el-select
                          v-model="saleForm.materialId"
                          style="width: 100%"
                          placeholder="请选择"
                          clearable
                          @change="handleDevice"
                        >
                          <el-option key="0" label="" value="" disabled>
                            <span style="float: left; color: #8492a6"
                              >物料编号</span
                            >
                            <span style="margin: 0 80px 0 18px; color: #8492a6"
                              >物料名称</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >采购名称</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >销售名称</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >出厂型号</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >销售型号</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >技术参数</span
                            >
                            <span
                              style="
                                margin: 0 50px 0 0px;
                                color: #8492a6;
                                font-size: 13px;
                              "
                              >单位</span
                            >
                            <span style="color: #8492a6; font-size: 13px"
                              >生产厂商</span
                            >
                          </el-option>
                          <el-option
                            v-for="item in deviceList"
                            :key="item.materialId"
                            :label="item.saleName"
                            :value="item.materialId"
                          >
                            <span style="float: left; color: #8492a6">{{
                              item.materialCode
                            }}</span>
                            <span
                              style="
                                display: inline-block;
                                width: 125px;
                                margin: 0 10px 0 25px;
                                color: #8492a6;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.materialName"
                              >{{ item.materialName }}</span
                            >
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;

                                margin-right: 2px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.purchaseName"
                            >
                              {{ item.purchaseName }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;
                                margin-right: 4px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.factoryCode"
                            >
                              {{ item.factoryCode }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;
                                margin-right: 2px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.saleCode"
                            >
                              {{ item.saleCode }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.technologyParameter"
                            >
                              {{ item.technologyParameter }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;

                                margin-right: 10px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.technologyParameter"
                            >
                              {{ item.technologyParameter }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 70px;
                                font-size: 13px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.materialUnitName"
                            >
                              {{ item.materialUnitName }}
                            </span>
                            <span
                              style="
                                display: inline-block;
                                width: 100px;
                                font-size: 13px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                              "
                              :title="item.manufactureName"
                            >
                              {{ item.manufactureName }}
                            </span>
                          </el-option>
                        </el-select>
                        <!-- <el-select
                    v-model="saleForm.materialId"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                    @change="handleDevice"
                  >
                    <el-option
                      v-for="dict in deviceList"
                      :key="dict.materialId"
                      :label="dict.saleName"
                      :value="dict.materialId"
                    />
                  </el-select> -->
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="saleForm.saleCategory === 0">
                      <el-form-item label="单位：">
                        <el-input
                          disabled
                          v-model="saleForm.materialUnitName"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="saleForm.saleCategory === 0">
                      <el-form-item label="技术参数：">
                        <el-input
                          disabled
                          v-model="saleForm.technologyParameter"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="saleForm.saleCategory === 0">
                      <el-form-item label="设备品牌：" prop="brand">
                        <el-input
                          v-model="saleForm.brand"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="saleForm.saleCategory === 0">
                      <el-form-item label="设备数量：" prop="quantity">
                        <el-input
                          v-model="saleForm.quantity"
                          placeholder="请输入"
                          clearable
                          type="Number"
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <!-- </el-row>
            <el-row> -->

                    <el-col :span="6" v-if="saleForm.saleCategory === 1">
                      <el-form-item label="平台名称：">
                        <el-input
                          v-model="saleForm.platformName"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="备注：">
                        <el-input
                          maxlength="2000"
                          style="width: 96.2%"
                          v-model="saleForm.remarks"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                          @keyup.enter.stop="handleSaleAdd(saleFormRef)"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>

            <!-- 添加甲方施工联系人 -->
            <el-collapse-item
              name="4"
              style="position: relative"
              v-if="contactAddShow && !saleAddShow"
              class="transform-up"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">添加联系人</span>
              </template>
              <div class="project-info">
                <el-form
                  :model="contactForm"
                  ref="contactFormRef"
                  :rules="queryContactRules"
                  label-width="100px"
                  v-enterToNext
                >
                  <el-row>
                    <el-col :span="6">
                      <el-form-item label="姓名：" prop="name">
                        <el-input
                          ref="contactRefInput"
                          v-model="contactForm.name"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="联系方式：" prop="phone">
                        <el-input
                          v-model="contactForm.phone"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="备注：">
                        <el-input
                          maxlength="2000"
                          style="width: 100%"
                          v-model="contactForm.remarks"
                          placeholder="请输入"
                          clearable
                          class="search-input"
                          @keyup.enter.stop="handleContactAdd(contactFormRef)"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-item>
            <!-- 甲方施工联系人 -->
            <el-collapse-item
              name="5"
              style="position: relative; margin-top: 20px"
              v-show="!saleAddShow && checkTypeFlag != 2"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">甲方施工联系人列表</span>
                <div
                  v-if="
                    pageType !== 'check' &&
                    pageType !== 'detail' &&
                    pageType !== 'status' &&
                    !contactAddShow
                  "
                  class="nofixed-search-button button-position"
                >
                  <el-button class="btn add" @click.stop="handleContactOperate"
                    ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                    >添加</el-button
                  >
                </div>
                <div
                  class="nofixed-search-button button-position"
                  v-else
                  v-if="
                    pageType !== 'check' &&
                    pageType !== 'detail' &&
                    pageType !== 'status'
                  "
                >
                  <el-button
                    class="btn add"
                    @click.stop="handleContactAdd(contactFormRef)"
                    ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
                    >添加</el-button
                  >
                  <el-button
                    class="btn direction"
                    @click.stop="handleProjectBack"
                    ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
                    >关闭</el-button
                  >
                </div>
              </template>
              <div class="contact-info">
                <el-table
                  :data="constructionData"
                  border
                  height="180px"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    label="姓名"
                    prop="name"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="联系方式"
                    prop="phone"
                    :show-overflow-tooltip="true"
                    min-width="160"
                  />
                  <el-table-column
                    label="备注"
                    prop="remarks"
                    :show-overflow-tooltip="true"
                    min-width="200"
                  />
                </el-table>
                <!-- 分页 -->
                <pagination
                  class="pagination"
                  :total="constructioTotal"
                  v-model:page="construction.pageNum"
                  v-model:limit="construction.pageSize"
                  @pagination="getConstructionList"
                />
              </div>
            </el-collapse-item>
          </el-collapse>

          <el-dialog
            :title="title"
            v-model="auditDialogShow"
            width="600px"
            style="margin-top: 20vh !important"
            append-to-body
          >
            <el-form-item label="审核备注：" label-width="100">
              <template #label>
                <i class="must-tip">*</i>
                审核备注：
              </template>
              <el-input
                style="width: 100%"
                v-model="auditRemark"
                placeholder=""
                type="textarea"
                maxlength="2000"
                clearable
              />
            </el-form-item>
            <template #footer>
              <div class="dialog-footer">
                <el-button
                  style="color: #fff; background-color: rgba(67, 207, 124, 1)"
                  v-if="auditResult == 3"
                  @click="saveCheck()"
                  v-loading="loadingCheck"
                  >同意</el-button
                >
                <el-button
                  style="color: #fff; background-color: rgba(245, 108, 108, 1)"
                  v-if="auditResult == 4"
                  @click="saveCheck()"
                  v-loading="loadingCheck"
                  >拒绝</el-button
                >
                <el-button
                  style="color: #fff; background-color: rgba(245, 108, 108, 1)"
                  v-if="auditResult == 6"
                  @click="saveCheck()"
                  v-loading="loadingCheck"
                >
                  驳回</el-button
                >
                <el-button style="background-color: #fff" @click="closeAudit()"
                  >取 消</el-button
                >
              </div>
            </template>
          </el-dialog>

          <!-- 详细地址地图选择弹窗 -->
          <el-dialog
            title="详细地址选择"
            v-model="isshowmap"
            width="1200px"
            append-to-body
          >
            <div style="width: 1160px; height: 600px">
              <Selectmap @handlerselect="handlermarker"></Selectmap>
            </div>
          </el-dialog>

          <el-dialog
            :title="operateType !== 'edit' ? '添加联系人' : '编辑联系人'"
            v-model="operateDialogShow"
            style="margin-top: 20vh !important"
            width="1400px"
            append-to-body
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :close="handleProjectBack"
          >
            <div>
              <el-form
                :model="contactForm"
                ref="contactFormRef"
                :rules="queryContactRules"
                label-width="100px"
                v-enterToNext
              >
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="姓名：" prop="name">
                      <el-input
                        ref="contactRefInput"
                        v-model="contactForm.name"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="联系方式：" prop="phone">
                      <el-input
                        v-model="contactForm.phone"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注：">
                      <el-input
                        maxlength="2000"
                        style="width: 100%"
                        v-model="contactForm.remarks"
                        placeholder="请输入"
                        clearable
                        class="search-input"
                        @keyup.enter.stop="handleContactAdd(contactFormRef)"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <template #footer>
              <!--  class="customer-info" -->

              <div class="dialog-footer">
                <el-button
                  style="color: #fff; background-color: rgba(67, 207, 124, 1)"
                  @click="handleContactAdd(contactFormRef)"
                  >保存</el-button
                >

                <el-button
                  style="background-color: #fff"
                  @click="handleProjectBack()"
                  >取 消</el-button
                >
              </div>
            </template>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="审核日志" name="approval">
          <div id="print-iframe" v-if="flowInfoList.length">
            <!-- 步骤栏 -->
            <div :class="printFlag ? 'steps-print-box' : 'steps-box'">
              <el-steps
                direction="vertical"
                :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                :active="flowingStep"
                finish-status="success"
              >
                <el-step v-for="(item, index) in flowInfoList" :key="index">
                  <template #title>
                    <div class="steps-top">
                      <div :title="item.name" style="width: 200px">
                        {{ item.name }}
                      </div>
                      <span class="steps-time">{{ item.createTime }}</span>
                    </div>
                  </template>
                  <template #description>
                    <div
                      class="steps-box-info"
                      v-if="item.auditEmpList && item.auditEmpList.length"
                    >
                      <div
                        v-for="(child, index) in item.auditEmpList"
                        :key="index"
                      >
                        <div class="ription">
                          {{ child.createUserName }} {{ child.resultName }}
                        </div>
                        <div class="ription" v-if="child.remark">
                          处理意见： {{ child.remark }}
                        </div>
                        <div
                          class="line"
                          v-if="index + 1 != item.auditEmpList.length"
                        ></div>
                      </div>
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
            <!-- 表格数据 -->
            <el-table
              v-if="false"
              :data="auditList"
              border
              :height="'100%'"
              :header-cell-style="{ 'text-align': 'center' }"
              sum-text=""
            >
              <!-- 操作模式 -->
              <el-table-column label="流程节点" prop="name" min-width="120">
              </el-table-column>
              <el-table-column
                label="审核人"
                prop="createUserName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核时间"
                prop="createTime"
                min-width="120"
              >
              </el-table-column>
              <el-table-column
                label="审核意见"
                prop="resultName"
                min-width="120"
              >
              </el-table-column>
              <el-table-column label="审核备注" prop="remark" min-width="120">
              </el-table-column>
            </el-table>
          </div>

          <div v-else>暂无审核</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup>
import {
  getProvinceApi,
  // getCustomerListApi,
  getnewUserListApi,
} from "@/api/information/customer";
import { getCustomerListApi } from "@/api/sales/contract";
import Upload from "@/components/Upload/index";
import Selectmap from "./selectmap";
import {
  addProjectApi,
  getProjectApi,
  editProjectApi,
  checkProjectApi,
  checkProjectStatusApi,
  editStatusProjectApi,
  selectAuditList,
  selectAuditList2,
} from "@/api/sales/project";
import { getallMaterialListApi } from "@/api/information/material";
import { selectPracticeInfosByProjectIdAdd } from "@/api/sales/projectRequirements";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import useUserStore from "@/store/modules/user";
const route = useRoute();
const emit = defineEmits([
  // 项目新增组件显隐
  "projectAddShow",
  // 更新项目新增组件显隐
  "update:projectAddShow",
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "updateFollowAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
const userStore = useUserStore();
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3", "4", "5"]);
const activeName = ref("info");
const activeFlag = ref(1);
// 客户表单引用
const projectFormRef = ref();

// 选择审核
const auditDialogShow = ref(false);
const loadingCheck = ref(false);
// 联系人表单引用
const contactFormRef = ref();
// 销售表单引用
const saleFormRef = ref();
// 联系人操作类型
const operateType = ref("");
// 详情加载效果
const detailInfoShow = ref(false);
const checkDialogShow = ref(false);
const checkTypeFlag = ref(null);
const detailFlag = ref(false);
// 新增编辑弹窗显隐
const operateDialogShow = ref(false);
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 销售清单当前索引(编辑销售清单使用)
const tableIndexSec = ref(null);
// 输入框引用
const refInput = ref();
// 联系人输入框引用
const contactRefInput = ref();
// 下拉框引用
const refSelect = ref();
// 销售项目类目列表
const saleCategoryList = ref([]);
// 是否签合同列表
const contractList = ref([]);
// 是否中标列表
const successfulList = ref([]);
// 项目种类列表
const kindList = ref([]);
// 所属行业
const industryList = ref([]);
// 项目状态列表
const statusList = ref([]);
// 项目类型列表
const typeList = ref([]);
// 客户列表
const customerList = ref([]);
// 设备列表
const deviceList = ref([]);
// 新增联系人表单显隐
const contactAddShow = ref(false);
// 新增销售列表表单显隐
const saleAddShow = ref(false);
//详细地址地图选择弹窗显隐
let isshowmap = ref(false);
let auditList = ref([]);
//审核进度数据
const flowInfoList = ref([]);
//当前进度
const flowingStep = ref(0);
const construction = reactive({
  pageNum: 1,
  pageSize: 50,
});
// 总数
const constructioTotal = ref(0);
//施工联系人数据
const constructionData = ref([]);
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  const { province, city, area } = projectForm.value;
  if (!province || !city || !area) {
    callback(new Error("请选择省市区"));
  } else {
    callback();
  }
};
// 项目表单模板
const projectFormTemplate = {
  address: "",
  area: null,
  arrivalStatus: null,
  checkStatus: null,
  checkTime: "",
  city: null,
  constructionAddress: "",
  customerId: null,
  endTime: "",
  includeContract: null,
  installationCompletionTime: "",
  money: null,
  planContractTime: "",
  practiceStatus: null,
  probability: "",
  projectCategory: null,
  projectName: "",
  projectPracticeInfoRespVos: [],
  projectSaleInfoRespVos: [],
  projectStatus: null,
  projectType: null,
  province: null,
  remarks: "",
  startTime: "",
  userId: null,
  type: 0,
  successfulBidder: null,
  dateValue: [],
  bidderPictures: [],
};
//自定义数字限制
const digitalRestrictions = (rule, value, callback) => {
  if (value < 0 || value > 9999) {
    callback(new Error("请输入0-9999之内的数字"));
  } else {
    callback();
  }
};
const data = reactive({
  // 项目表单
  projectForm: JSON.parse(JSON.stringify(projectFormTemplate)),
  // 联系人表单
  contactForm: {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  },
  // 销售清单表单
  saleForm: {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    projectId: null,
    projectSaleId: null,
    quantity: null,
    remarks: "",
    saleCategory: null,
    saleCategoryName: "",
    saleName: "",
  },
  // 项目表单校验规则
  queryRules: {
    projectName: [
      { required: true, message: "请输入项目名称", trigger: "blur" },
    ],
    userId: [{ required: true, message: "请选择业务人员", trigger: "change" }],
    projectStatus: [
      { required: true, message: "请选择项目状态", trigger: "change" },
    ],
    projectType: [
      { required: true, message: "请选择项目类型", trigger: "change" },
    ],
    dateValue: [
      { required: true, message: "请选择项目起止时间", trigger: "change" },
    ],
    projectCategory: [
      { required: true, message: "请选择项目种类", trigger: "change" },
    ],
    industry: [
      { required: true, message: "请选择所属行业", trigger: "change" },
    ],
    customerId: [
      { required: true, message: "请选择关联客户", trigger: "change" },
    ],
    city: [
      {
        required: true,
        validator: provinceValidate,
        message: "请选择省市区",
        trigger: "change",
      },
    ],
    address: [
      {
        required: true,
        message: "请输入详细地址",
        trigger: ["blur", "change"],
      },
      { min: 0, max: 49, message: "最多可输入50个字符", trigger: "blur" },
    ],
    probability: [
      { required: true, message: "请输入成交概率预估", trigger: "blur" },
      { validator: digitalRestrictions, trigger: "blur" },
    ],
    money: [
      { required: true, message: "请输入项目金额", trigger: "blur" },
      {
        pattern: /^\d{1,20}(\.\d+)?$/,
        message: "只能输入最多20位数字",
        trigger: "blur",
      },
    ],
    includeContract: [
      { required: true, message: "请选择是否签合同", trigger: "change" },
    ],
    successfulBidder: [
      { required: true, message: "请选择是否中标", trigger: "change" },
    ],
    planContractTime: [
      { required: true, message: "请选择计划成交合同时间", trigger: "change" },
    ],
    checkTime: [
      { required: true, message: "请选择验收日期", trigger: "change" },
    ],
    constructionAddress: [
      { required: true, message: "请输入施工地址", trigger: "blur" },
    ],
    installationCompletionTime: [
      { required: true, message: "请选择期望安装完成日期", trigger: "change" },
    ],
    endUseUnit: [
      { required: true, message: "请填写最终使用单位", trigger: "blur" },
    ],
    unitContact: [
      { required: true, message: "请填写使用单位联系人", trigger: "blur" },
    ],
    unitContactInformation: [
      {
        required: true,
        message: "请填写使用单位联系人联系方式",
        trigger: "blur",
      },
    ],
  },
  // 联系人表单校验规则
  queryContactRules: {
    name: [
      { required: true, message: "请输入姓名", trigger: "blur" },
      { min: 1, max: 15, message: "最多可输入15字", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入联系方式", trigger: "blur" },
      { min: 1, max: 11, message: "最多可输入11字", trigger: "blur" },
    ],
  },
  // 销售清单表单校验规则
  querySaleRules: {
    saleCategory: [
      { required: true, message: "请选择销售类目", trigger: "change" },
    ],
    materialId: [
      { required: true, message: "请选择设备名称", trigger: "change" },
    ],
    quantity: [{ required: true, message: "请输入设备数量", trigger: "blur" }],
    brand: [{ required: true, message: "请输入设备品牌", trigger: "blur" }],
  },
  // 省列表
  provinceList: [],
  // 市列表
  cityList: [],
  // 区列表
  areaList: [],
  // 用户列表
  userList: [],
  auditRemark: "",
  auditResult: "",
  applyId: "",
});
const {
  projectForm,
  contactForm,
  saleForm,
  queryRules,
  queryContactRules,
  querySaleRules,
  provinceList,
  cityList,
  areaList,
  userList,
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);

/**
 * @description: 获取施工联系人列表
 */
const getConstructionList = async () => {
  let { pageNum, pageSize } = construction;
  const res = await selectPracticeInfosByProjectIdAdd(
    { pageNum, pageSize },
    { projectId: projectForm.value.projectId }
  );
  console.log("施工清单", res);
  constructionData.value = res.rows;
  constructioTotal.value = res.total;
};

const handleCheckBtn2 = (requestFormRef, type, title) => {
  auditRemark.value = "";
  if (type == 3) {
    auditRemark.value = "同意";
  }

  auditResult.value = type;
  (applyId.value = projectForm.value.projectId), (auditDialogShow.value = true);
  loadingCheck.value = false;
};

const saveCheck = async () => {
  if (auditRemark.value === null || auditRemark.value === "") {
    ElMessage.error("审核备注不能为空");
    return;
  }

  const obj = {
    checkStatus: auditResult.value,
    projectId: applyId.value,
    auditRemark: auditRemark.value,
  };
  const obj2 = {
    projectStatus: projectForm.value.projectStatus,
    checkProjectStatus: auditResult.value,
    projectId: projectForm.value.projectId,
    auditRemark:auditRemark.value,
  };
  try {
    loadingCheck.value = true;
    let res;
    if (checkTypeFlag.value == 2) {
      res = await checkProjectStatusApi(obj2);
    } else {
      res = await checkProjectApi(obj);
    }

    auditDialogShow.value = false;

    //loadingCheck.value =false;

    if (res.code === 200) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
      return;
    }
    loadingCheck.value = false;
    emit("updateFollowAddShow", false);
    emit("update:projectAddShow", false);
    emit("refreshList", false);
  } catch (error) {
    loadingCheck.value = false;
    emit("updateFollowAddShow", false);
    emit("update:projectAddShow", false);
    emit("refreshList", false);
    // ElMessage.error(error);
  }
};

//地图详细地址
const handlermarker = (pointInfo) => {
  console.log("pointInfo", pointInfo);
  isshowmap.value = false;
  projectForm.value.address = pointInfo.address;
  projectForm.value.longitude = pointInfo.lng;
  projectForm.value.latitude = pointInfo.lat;
};
/**
 * @description: 地图详细地址
 */
const selectaddress = () => {
  isshowmap.value = true;
};

const closeAudit = () => {
  auditRemark.value = "";
  auditResult.value = "";
  applyId.value = "";
  auditDialogShow.value = false;
};

/**
 * @description: 保存
 * @param {Object} customerFormRef 客户表单引用
 */
const handleAddSave = async (projectFormRef, type) => {
  // if (type && props.pageType === "edit") {
  //   return handleCheckBtn(projectFormRef, 1, "提交");
  // }
  if (!projectFormRef) return;
  if (type == 1 && projectForm.value.projectPracticeInfoRespVos.length == 0) {
    ElMessage.error("请添加甲方施工联系人信息");
    return;
  }
  await projectFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          projectForm.value.type = type;
          projectForm.value.startTime = projectForm.value.dateValue[0];
          projectForm.value.endTime = projectForm.value.dateValue[1];
          let res;

          if (!projectForm.value.projectId) {
            projectForm.value.checkStatus = type;
            res = await addProjectApi(projectForm.value);
          } else if (type == 0 || type == 1) {
            res = await editProjectApi(projectForm.value);
          } else if (type == 2) {
            res = await editStatusProjectApi(projectForm.value);
          }
          if (res.code === 200) {
            emit("update:projectAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 */
function uploadSuccess(response) {
  // materialForm.value.materialPictures.push({ ...response, businessType: 4 });
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 */
function uploadRemove(index) {
  materialForm.value.materialPictures.splice(index, 1);
}
/**
 * @description: 处理销售类目选择
 * @param {Number} value 当前值
 */
const handleSaleCategory = (value) => {
  saleCategoryList.value.forEach((item) => {
    if (item.value === value) {
      saleForm.value.saleCategoryName = item.label;
    }
  });
  const obj = {
    brand: "",
    saleName: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    quantity: null,
    remarks: "",
  };
  saleForm.value = { ...saleForm.value, ...obj };
};

/**
 * @description: 处理设备名称选择
 * @param {Number} value 当前值
 */
const handleDevice = (value) => {
  if (value) {
    deviceList.value.forEach((item) => {
      if (value === item.materialId) {
        saleForm.value.saleName = item.saleName;
        saleForm.value.materialUnit = item.materialUnit;
        saleForm.value.materialUnitName = item.materialUnitName;
        saleForm.value.technologyParameter = item.technologyParameter;
      }
    });
  } else {
    saleForm.value.saleName = "";
    saleForm.value.materialUnit = "";
    saleForm.value.materialUnitName = "";
    saleForm.value.technologyParameter = "";
  }
};

/**
 * @description: 处理业务人员选择
 * @param {Number} value 当前值
 */
const handlePeopleChange = async (value) => {
  projectForm.value.customerId = null;
  if (value) {
    projectForm.value.customerId;
    await getCustomerListApi(projectForm.value.userId).then((res) => {
      if (res) {
        customerList.value = res;
      }
    });
  } else {
    customerList.value = [];
  }
};

/**
 * @description: 处理审核状态相关按钮
 * @param {String} type  类型
 * @param {String} title 标题
 */
const handleCheckBtn = (projectFormRef, type, title) => {
  ElMessageBox.confirm(`确定${title}以上数据吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      const obj = {
        checkStatus: type,
        projectId: projectForm.value.projectId,
      };
      const res = await checkProjectApi(obj);
      if (res.code === 200) {
        emit("updateFollowAddShow", false);
        emit("update:projectAddShow", false);
        emit("refreshList", false);
        ElMessage.success(res.msg);
        projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {});
};

/**
 * @description: 返回
 */
const handleBack = () => {
  emit("update:projectAddShow", false);
  projectForm.value = JSON.parse(JSON.stringify(projectFormTemplate));
};

/**
 * @description: 新增、编辑联系人
 * @param {Object} contactFormRef 联系人表单引用
 */
const handleContactAdd = async (contactFormRef) => {
  if (!contactFormRef) return;
  await contactFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.projectPracticeInfoRespVos[tableIndex.value] =
          JSON.parse(JSON.stringify(contactForm.value));
      } else {
        projectForm.value.projectPracticeInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...contactForm.value }))
        );
      }
      contactForm.value = {
        name: "",
        phone: "",
        practiceId: null,
        projectId: null,
        remarks: "",
      };
      contactFormRef.resetFields();
      // nextTick(() => {
      //   contactRefInput.value.focus(); // 聚焦
      // });
      operateDialogShow.value = false;
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 新增、编辑销售清单
 * @param {Object} saleFormRef 联售清单引用
 */
const handleSaleAdd = async (saleFormRef) => {
  if (!saleFormRef) return;
  await saleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        projectForm.value.projectSaleInfoRespVos[tableIndexSec.value] =
          JSON.parse(JSON.stringify(saleForm.value));
      } else {
        projectForm.value.projectSaleInfoRespVos.push(
          JSON.parse(JSON.stringify({ ...saleForm.value }))
        );
      }
      saleForm.value = {
        brand: "",
        saleName: "",
        materialId: null,
        materialUnit: null,
        materialUnitName: "",
        platformName: "",
        technologyParameter: "",
        projectId: null,
        projectSaleId: null,
        quantity: null,
        remarks: "",
        saleCategory: null,
        saleCategoryName: "",
        saleName: "",
      };
      //   contactAddShow.value = false;
      saleFormRef.resetFields();
      nextTick(() => {
        refSelect.value.focus(); // 聚焦
      });
    } else {
      console.log("error submit!");
    }
  });
  //   operateType.value = "";
};

/**
 * @description: 处理联系人操作
 */
const handleContactOperate = () => {
  operateDialogShow.value = true;
  operateType.value = "add";
  setTimeout(() => {
    contactRefInput.value.focus(); // 聚焦
  }, 500);
};

/**
 * @description: 处理销售清单操作
 */
const handleSaleOperate = () => {
  saleAddShow.value = true;
  operateType.value = "add";
  nextTick(() => {
    refSelect.value.focus(); // 聚焦
  });
};

/**
 * @description: 联系人返回
 */
const handleProjectBack = () => {
  contactForm.value = {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  };
  contactFormRef.value.resetFields();
  operateDialogShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 销售清单返回
 */
const handleSaleBack = () => {
  saleAddShow.value = false;
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
};

/**
 * @description: 处理省市区操作
 * @param {String} type 类型
 */
const handleProvince = (type) => {
  switch (type) {
    case "province":
      cityList.value = [];
      areaList.value = [];
      projectForm.value.city = null;
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.province).then((res) => {
        if (res.code === 200) {
          cityList.value = res.data;
        }
      });
      break;
    case "city":
      areaList.value = [];
      projectForm.value.area = null;
      getProvinceApi(projectForm.value.city).then((res) => {
        if (res.code === 200) {
          areaList.value = res.data;
        }
      });
      break;
  }
};

/**
 * @description: 处理销售清单表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperateSec = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndexSec.value = tabIndex;
    saleForm.value = JSON.parse(JSON.stringify(row));
    // saleAddShow.value = true;
    operateDialogShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refSelect.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectSaleInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndex.value = tabIndex;
    contactForm.value = JSON.parse(JSON.stringify(row));
    // contactAddShow.value = true;
    operateDialogShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      contactRefInput.value.focus(); // 聚焦
    });
  } else {
    projectForm.value.projectPracticeInfoRespVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 * @param {Number} type 区分项目立项、营销项目审核
 * @param {Number} detailFlagValue 区分详情、审核
 * @param {Number} flowUuid 审批使用id
 */
const handleDetailInfo = async (id, type = 1, detailFlagValue = false,flowUuid = null) => {
  detailFlag.value = detailFlagValue;
  checkTypeFlag.value = type;
  checkDialogShow.value = true;
  try {
    detailInfoShow.value = true;
    const res = await getProjectApi(id);
    projectForm.value = {
      ...res.projectInfoRespVo,
      projectPracticeInfoRespVos: res.projectPracticeInfoRespVos,
      projectSaleInfoRespVos: res.projectSaleInfoRespVos,
    };
    console.log(" projectForm.value", projectForm.value);
    projectForm.value.dateValue = [
      projectForm.value.startTime,
      projectForm.value.endTime,
    ];
    getConstructionList();
    await getProvinceApi(projectForm.value.province).then((res) => {
      if (res.code === 200) {
        cityList.value = res.data;
      }
    });
    await getProvinceApi(projectForm.value.city).then((res) => {
      if (res.code === 200) {
        areaList.value = res.data;
      }
    });
    await getCustomerListApi(projectForm.value.userId).then((res) => {
      if (res) {
        customerList.value = res;
      }
    });
    let resAudit;
    if (checkTypeFlag.value == 2) {
      resAudit = await selectAuditList2(id,flowUuid);
    } else {
      resAudit = await selectAuditList(id,flowUuid);
    }

    console.log("流程");
    console.log(resAudit);
    auditList.value = resAudit.data;
    if (resAudit.data.length) {
      flowInfoList.value = resAudit.data;
      flowingStep.value = resAudit.data[0].flowingStep;
    }
    setTimeout(() => {
      detailInfoShow.value = false;
    }, 500);
  } catch (error) {
    detailInfoShow.value = false;
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  // 设备列表
  await getallMaterialListApi({}, {}).then((res) => {
    deviceList.value = res;
  });
  // 销售项目类目
  await getDictsApi("erp_sale_category").then((res) => {
    if (res.code === 200) {
      saleCategoryList.value = res.data;
    }
  });

  // 是否签合同
  await getDictsApi("erp_include_contract").then((res) => {
    if (res.code === 200) {
      contractList.value = res.data;
    }
  });
  // 是否中标
  await getDictsApi("erp_successful_bidder").then((res) => {
    if (res.code === 200) {
      successfulList.value = res.data;
    }
  });

  // 项目种类
  await getDictsApi("erp_project_category").then((res) => {
    if (res.code === 200) {
      kindList.value = res.data;
    }
  });
  // 所属行业
  await getDictsApi("erp_project_industry").then((res) => {
    if (res.code === 200) {
      industryList.value = res.data;
    }
  });
  // 项目状态
  await getDictsApi("erp_project_new_status").then((res) => {
    if (res.code === 200) {
      statusList.value = res.data;
      if (props.pageType == "add") {
        projectForm.value.projectStatus = -1;
      }
    }
  });
  // 项目类型
  await getDictsApi("erp_project_type").then((res) => {
    if (res.code === 200) {
      typeList.value = res.data;
    }
  });
  // 用户
  await getnewUserListApi({ deptType: 5 }).then((res) => {
    if (res.length > 0) {
      userList.value = res;
    }
  });
  // 省
  await getProvinceApi(1).then((res) => {
    if (res.code === 200) {
      provinceList.value = res.data;
    }
  });
}

onMounted(() => {
  getDicts();
  nextTick(() => {
    refInput.value.focus(); // 聚焦
  });
  // if (props.pageType === "add") {
  // requestForm.value.handleId = userStore.id;
  // projectForm.value.userId = userStore.id;
  // }
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}

.projectAdd {
  // padding: 20px 20px 0 20px;
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .project-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }
  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  .search-button {
    // position: relative !important;
    position: static;
  }
  :deep(.el-step__head.is-success) {
    color: #3399ff;
    border-color: #3399ff;
    position: relative;
  }
  :deep(.el-step__title) {
    // font-size: 16px;
    // line-height: 38px;
    // position: absolute;
    // top: -38px;
    // width: 140px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  :deep(.el-step__title.is-success) {
    font-size: 14px;
    color: #333333;
  }
  :deep(.desLabel) {
    background: transparent !important;
    width: 200px;
    // overflow: hidden;
    // white-space: nowrap; /* 确保文本在一行内显示 */
    // text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
    font-weight: 500 !important;
  }
  .desContent {
    // width: 100%;
    width: 330px;
    overflow: hidden;
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
  }
  .pagination {
    margin-bottom: 20px;
  }
}
</style>

<style>
.dialogBox .el-dialog__title {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 42px;
}

.dialogBox .el-dialog__body {
  padding: 0px 20px !important;
  height: 740px !important;
  overflow: auto;
}
.dialogBox .el-dialog__header {
  padding-bottom: 0 !important;
}
.custom-dropdown .dropdown-slot {
  height: 28px;
  line-height: 28px;
}

.custom-dropdown .scrollable-options {
  max-height: 200px; /* 根据需要设置合适的高度 */
  overflow-y: auto;
}

.dialogBox .dialog-top {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 42px;
  display: flex;
  justify-content: space-between;
  width: 70%;
  margin-bottom: 18px;
}

.dialogBox .dialog-footer {
  position: absolute;
  padding: 10px 20px 0px 0px;
  bottom: 0px;
  right: 0px;
  z-index: 2000;
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.steps-time {
  font-size: 14px;
  color: #666666;
  margin-left: 300px;
}
.steps-box-info {
  margin: 30px 0;
  padding: 10px;
  width: 630px;
  min-height: 56px;
  border: 1px solid #e6e6e6;
  .ription {
    margin-bottom: 10px;
  }
  .line {
    width: 100%;
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
  }
}
.steps-top {
  display: flex;
}
</style>
